<template>
    <div class="page home-page">
        <div class="page-con">
            <div style="overflow: hidden;">
                <div class="file-title">请选择工程 <el-link type="info" @click="restet">刷新</el-link></div>
                <div class="search-box">
                    <el-input
                            clearable
                            @keyup.enter.native="search"
                            v-model="listQuery.name"
                            size="small"
                            placeholder="检索">
                        <i
                                class="el-icon-search"
                                style="font-size:18px;color:rgba(16, 16, 16, 1);line-height: 32px"
                                slot="suffix">
                        </i>
                    </el-input>
                </div>
            </div>
            <div class="home-right" :style="{height:wh + 'px'}">
                <div class="home-con" v-show="titleIndex != 0" :style="{height:wh-40 + 'px'}">
                    <!--打开工程 -->
                    <div class="open-file" v-if="titleIndex==3" style="height:100%;overflow: auto">
                        <div class="file-list" v-loading="listLoading" style="height:100%;">
                            <div class="file-item"  @click="editPowerStation(item)" v-for="item in list" :key="item.id">
                                <div class="file-left">
                                    <div class="title">{{item.name}}</div>
                                    <div class="sub-title">
                                        <span style="vertical-align: middle">{{item.locationType | filterType(item.stationType)}}</span>
                                        <span v-if="!item.isOwner" style="vertical-align: middle"> | {{item.userName}}</span>
                                        <span v-if="item.is3dDesigned" style="vertical-align: middle"><img src="../static/img/logosamll.png" style="width:12px;"/></span>
                                    </div>
                                </div>
                                <div class="file-right">
                                    <div class="time">{{item.updateTime}}</div>
                                </div>
                            </div>
                            <div v-if="total==0" style="text-align: center;color:#666;font-size: 12px;height:80px;line-height: 80px"> - 暂无数据 - </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <div class="page-bottom">
            <div>
                <span style="font-size:20px;margin-right:10px">Welcome</span>
                <img src="../static/img/user.png" style="width:24px"/>
                <span class="user-name">{{userInfo.userName}}</span>
                <el-link type="info" @click="logout">退出</el-link>
            </div>

            <div class="pagination-div" style="padding-right:44px">
                <el-pagination
                        v-if="titleIndex==3"
                        layout="prev, pager, next"
                        @current-change="handleCurrentChange"
                        :current-page.sync="listQuery.pageIndex"
                        :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
  import {getProjectList} from '@/api/index.js';
  export default {
      name: 'home',
      data() {
          return {
              titleIndex: 3,
              newType: 2,//新建模式
              userInfo: {},
              listLoading: false,
              listQuery: {
                  pageIndex: 1,
                  pageSize: 10,
                  userId: '',
                  name: '',
                  projectType:'3d'
              },
              list: [],
              total: 0,
              title:'',
              dialogVisible:false,
              value:{
                  projectName:'',
              },
              rules:{
                  projectName:[{required: true, message: '请输入项目名称', trigger: 'blur'}],
              },
              locationType:'',
              wh:''

          }
      },
      filters:{
          filterType(locationType,stationType){
                if(locationType == 'ground' && stationType == 'online'){
                    return '并网地面电站'
                }else if(locationType == 'ground' && stationType == 'offline'){
                    return '离网网地面电站'
                }else if(locationType == 'roof' && stationType == 'online'){
                    return '并网网屋顶电站'
                }else if(locationType == 'roof' && stationType == 'offline'){
                    return '离网网屋顶电站'
                }
          },
      },
      methods: {
          //刷新
          restet(){
              this.getList();
          },

          //新建编辑项目
          editPowerStation(item) {
             this.$router.push({
                  name: "settingPhotovoltaic",
                  query: {id: item.id},
              });

                if(item.is3dDesigned){
                    sketchup.open_action(item.id);
                }
          },

          //获取工程列表
          getList() {
              this.listLoading = true;
              getProjectList(this.listQuery).then(response => {
                  this.listLoading = false;
                  this.list = response.list;
                  this.total = response.count;
              }).catch(() => {
                  this.listLoading = false;
              });

          },

          //切换页码
          handleCurrentChange(val){
              this.listQuery.pageIndex = val;
              this.getList();
          },

        //搜索
          search(){
              this.listQuery.pageIndex = 1;
              this.getList();
          },

          //退出
          logout() {
              this.$confirm('确定要退出吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  localStorage.clear();
                  this.$router.push({name: 'login'})
              })
          },
      },
      created() {
          this.getList();
          this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
          this.listQuery.userId = this.userInfo.userId;
          let self = this;
          setTimeout(()=>{
              $(function(){
                  self.wh = $(window).height() - 150 > 680 ? 680 : $(window).height() - 150;
                  $(window).resize(function() {
                      self.wh = $(window).height() - 150 > 680 ? 680 : $(window).height() - 150;
                  });
              })
          },500)

      }
  }
</script>



